<template>
  <div class="login_container">
    <div class="stars">
      <div
        v-for="(item, index) in starsCount"
        :key="index"
        class="star"
        ref="star"
      >
      </div>
    </div>
    <!-- 后台登陆 -->
    <div class="login_box">
      <h1 class="header">
        后台管理
      </h1>
      <el-form
        :model="loginForm"
        ref="loginForm"
        label-width="70px"
        class="login_form"
        :rules="rules"
        status-icon
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            type="username"
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            prefix-icon="el-icon-view"
            v-model="loginForm.password"
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button
            type="primary"
            @click="login('loginForm')"
          >登陆</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空' }
        ],
        password: [
          { required: true, message: '密码不能为空' }
        ]
      },
      activeName: 'login',
      starsCount: 800,
      distance: 800
    }
  },
  methods: {
    login (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { data: res } = await this.$http.post('login', this.loginForm)
          if (res.meta.status === 200) {
            this.$message({
              message: '恭喜您，登陆成功',
              type: 'success'
            })
            // 调用api来存储token
            window.sessionStorage.setItem('token', res.data.token)
            // 编程式路由
            this.$router.push('/home')
          } else {
            this.$message.error('Sorry！请检查用户名和密码')
          }
        }
      })
    },
    resetForm (formName) {
      // 重置登陆表单
      this.$refs[formName].resetFields()
    },
    handleClick (tab, event) {
    }
  },
  mounted () {
    let _this = this
    let starArr = _this.$refs.star
    starArr.forEach(item => {
      var speed = 0.2 + (Math.random() * 1)
      var thisDistance = _this.distance + (Math.random() * 300)
      item.style.transformOrigin = `0 0 ${thisDistance}px`
      item.style.transform = `translate3d(0,0,-${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed}, ${speed})`
    })
  }
}
</script>

<style lang="less" scoped>
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg)
      rotateY(-360deg);
  }
}

.star {
  width: 2px;
  height: 2px;
  background: #f7f7b8;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.stars {
  transform-style: preserve-3d;
  position: absolute;
  transform: perspective(500px);
  perspective-origin: 50% 100%;
  left: 50%;
  animation: rotate 90s infinite linear;
  bottom: 0;
}

.login_container {
  height: 100%;
  background: radial-gradient(
    200% 100% at buttom center,
    #f7f7b6,
    #e96f92,
    #1b2947
  );
  background: radial-gradient(
    220% 105% at top center,
    #1b2947 10%,
    #75517d 40%,
    #e96f92 65%,
    #f7f7b6
  );
  background-attachment: fixed;
  overflow: hidden;
}

.login_box {
  width: 360px;
  height: 280px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}

.header {
  text-align: center;
}
</style>
